<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="value" />
    <AbcTable :list="referList" @detail="detail" />
    <PopUP v-show="flag" :addList="addList" @delfn="delfn" />
  </div>
</template>
<script>
import AbcTable from '@/components/AbcTable.vue'
import PopUP from '@/components/PopUp.vue'
export default {
  components: {
    AbcTable,
    PopUP,
  },
  data() {
    return {
      flag: false,
      id: '',
      value: '',
      list: [
        {
          date: '2021-01-10',
          uname: '张三',
          res: '感冒',
          infor: '感冒药',
        },
        {
          date: '2021-02-10',
          uname: '李四',
          res: '头疼',
          infor: '止疼药',
        },
        {
          date: '2021-03-10',
          uname: '王五',
          res: '腰疼',
          infor: '止痛贴',
        },
      ],
    }
  },
  methods: {
    detail(id) {
      this.id = id
      this.flag = true
    },
    delfn() {
      this.flag = false
    },
  },
  computed: {
    referList() {
      return this.list.filter((item) => {
        return (
          item.date.includes(this.value) ||
          item.uname.includes(this.value) ||
          item.res.includes(this.value) ||
          item.infor.includes(this.value)
        )
      })
    },
    addList() {
      return this.list.find((item) => item.uname === this.id)
    },
  },
}
</script>
<style scoped></style>
